<template>
	<view class="jf_detail">
		<view v-if="detailList.length != 0">
			<view class="jf_box" v-for="(item, index) in detailList" :key="index">
				<view class="jf_box_top">
					<text class="jf_titl">缴费单号</text>
					<text class="jf_txt">{{item.clientBillNo}}</text>
				</view>
				<view class="jf_box_bottom">
					<view class="jf_box_item">
						<text class="jf_box_title">缴费入口</text>
						<text class="jf_txt">{{item.portalName}}</text>
					</view>
					<view class="jf_box_item">
						<text class="jf_box_title">缴费方式</text>
						<text class="jf_txt">{{item.channelName}}</text>
					</view>
					<view class="jf_box_item">
						<text class="jf_box_title">收款商户</text>
						<text class="jf_txt">{{item.merchantName}}</text>
					</view>
					<view class="jf_box_item">
						<text class="jf_box_title">收款账户</text>
						<text class="jf_txt">{{item.accountName}}</text>
					</view>
					<view class="jf_box_item">
						<text class="jf_box_title">缴费状态</text>
						<text class="jf_txt success" :style="{color: item.payState != 0 ? 'red' : ''}">{{stateToTxt(item.payState)}}</text>
					</view>
					<view class="jf_box_item">
						<text class="jf_box_title">缴费时间</text>
						<text class="jf_txt">{{item.payTime == null ? '' : item.payTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<noContent v-else noContent="目前还没有缴费记录!"></noContent>
	</view>
</template>

<script>
	import {payCenterList} from '../../common/api/index.js';
	import noContent from '../../components/no-content.vue'
	export default {
		onLoad:function(option){
			this.obj = {...JSON.parse(decodeURIComponent(option.obj))}
		},
		components:{
			noContent
		},
		data() {
			return {
				orgId: '',
				obj: {},
				detailList: []
			}
		},
		onShow:function(){
			this._getDetail()
		},
		computed: {
			stateToTxt(state) {
				return function(state) {
					if(state == 0) {
						return "支付成功"
					}
					if(state == 1) {
						return "未支付"
					}
					if(state == 2) {
						return "下单失败"
					}
					if(state == 3) {
						return "支付失败"
					}
					if(state == 4) {
						return "支付中"
					}
					if(state == 5) {
						return "订单关闭"
					}
				}
			}
		},
		methods: {
			_getDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				// #ifdef H5
				payCenterList({
					clientBillNo: this.obj.billNo,
					orgId: this.obj.orgId,
					currentPage: 1,
					pageSize: 50
				}).then( res => {
					if(res.resultCode == 0) {
						uni.hideLoading()
						if(res.pageInfo == null) {
							this.detailList = []
						} else {
							this.detailList = res.pageInfo.list
						}
					} else {
						uni.hideLoading()
					}
				}).catch( err=> {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-ALIPAY
				payCenterList({
					clientBillNo: this.obj.billNo,
					orgId: this.obj.orgId,
					currentPage: 1,
					pageSize: 50
				}).then( res => {
					if(res.resultCode == 0) {
						uni.hideLoading()
						if(res.pageInfo == null) {
							this.detailList = []
						} else {
							this.detailList = res.pageInfo.list
						}
					} else {
						uni.hideLoading()
					}
				}).catch( err=> {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef MP-WEIXIN
				payCenterList({
					clientBillNo: this.obj.billNo,
					orgId: this.obj.orgId,
					currentPage: 1,
					pageSize: 50
				}).then( res => {
					if(res.resultCode == 0) {
						uni.hideLoading()
						if(res.pageInfo == null) {
							this.detailList = []
						} else {
							this.detailList = res.pageInfo.list
						}
					} else {
						uni.hideLoading()
					}
				}).catch( err=> {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				// #ifdef APP-PLUS
				payCenterList({
					clientBillNo: this.obj.billNo,
					orgId: this.obj.orgId,
					currentPage: 1,
					pageSize: 50
				}).then( res => {
					if(res.resultCode == 0) {
						uni.hideLoading()
						if(res.pageInfo == null) {
							this.detailList = []
						} else {
							this.detailList = res.pageInfo.list
						}
					} else {
						uni.hideLoading()
					}
				}).catch( err=> {
					uni.hideLoading()
					console.log(err)
				})
				// #endif
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.jf_detail {
		padding: 32rpx;
		.jf_box {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 24rpx;
			.jf_box_top {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx 30rpx;
				border-bottom: 0.5px solid #DDDDDD;
				.jf_titl {
					font-family: "PingFangSC";
					font-weight: 700;
					font-size: 36rpx;
					color: rgb(16, 16, 16);
				}
				.jf_txt {
					font-family: "PingFangSC";
					font-weight: 400;
					font-size: $font-size-lg;
					color: rgb(123, 125, 128);
				}
			}
			.jf_box_bottom {
				padding: 20rpx 50rpx 30rpx 50rpx;
				.jf_box_item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					line-height: 50rpx;
					.jf_box_title {
						font-family: "PingFangSC";
						font-weight: 600;
						font-size: $font-size-lg;
						color: rgb(16, 16, 16);
					}
					.jf_txt {
						font-family: "PingFangSC";
						font-weight: 400;
						font-size: $font-size-lg;
						color: rgb(123, 125, 128);
					}
					.success {
						color: rgba(18, 225, 11, 1);
					}
				}
			}
		}
	}
	.jf_box:last-child {
		margin-bottom: 0;
	}
</style>
